<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <base href="${pageContext.request.contextPath}/"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css"/>
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<!-- 搜索 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">审批流程</h4>
    </div>
    <div class="panel-body">
        <form action="approve/selectApprove" id="seachform" method="post"
              class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="flowName" class="col-md-4 control-label">流程名称</label>
                    <div class="col-md-8">
                        <input type="text" name="flowName" class="form-control"
                               placeholder="请输入流程名称" value="${flow.flowName}">
                        <input type="hidden" name="page" id="page" value="${pageBean.page }">
                        <input type="hidden" name="pageSize" id="pageSize" value="${pageBean.pageSize }">
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="docType" class="col-md-4 control-label">单据类型</label>
                    <div class="col-md-8">
                        <select name="docType1" id="docType1" class="form-control">
                            <option value="">--请选择--</option>
                            <option value="BXD">--报销申请单--</option>
                            <option value="GMD">--购买申请单--</option>
                            <option value="YDD">--移动申请单--</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="col-md-12">
                        <button type="button" onclick="searchBtn()" class="btn btn-success">搜索审批流程</button>
                        <button onclick="editFlow(0)" class="btn btn-info" type="button">添加审批流程</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 列表 -->
<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>流程名称</td>
            <td>单据类型</td>
            <td>流程描述</td>
            <td>流程状态</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageBean.data}" var="d">
        <tr align="center">
            <td>${d.flowName }</td>
            <td>${d.docType=="BXD"?"报销申请单":d.docType=="GMD"?"购买申请单":d.docType=="YDD"?"移动申请单":""}</td>
            <td>${d.info}</td>
            <td>${d.state=="Y"?"启用":"禁用"}</td>
            <td>
                <button type="button" onclick="location.href='node/listNode?flowid=${d.oid}'" class="btn btn-success btn-xs">
                    浏览审批节点
                </button>

                <c:if test='${d.state=="Y"}'>
                    <button onclick="editFlowState(this,${d.oid})" value="N" class="btn btn-warning btn-xs"
                            type="button">禁用
                    </button>
                </c:if>
                <c:if test='${d.state=="N"}'>
                    <button onclick="editFlowState(this,${d.oid})" value="Y" class="btn btn-success btn-xs"
                            type="button">启用
                    </button>
                </c:if>
                <button type="button" onclick="editFlow(${d.oid},'${d.flowName }','${d.docType}','${d.info}','${d.state}')" class="btn btn-primary btn-xs">修改</button>
                </button>
                <button type="button" onclick="deleteFlow(${d.oid})" class="btn btn-danger btn-xs" data-toggle="modal"
                        data-target="#confirmModal">删除
                </button>
            </td>
        </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 分页 -->
<div class="input-group col-md-6 col-md-offset-3">
    <div class="row">
        <div class="btn-group">
            <button onclick="gotoPage(1,${pageBean.pageSize})" class="btn btn-primary" type="button">首页</button>
            <c:if test="${pageBean.page==1 }">
                <button class="btn btn-primary disabled" type="button">上一页</button>
            </c:if>
            <c:if test="${pageBean.page>1 }">
                <button onclick="gotoPage(${pageBean.page-1},${pageBean.pageSize})" class="btn btn-primary" type="button">上一页</button>
            </c:if>

            <button class="btn btn-primary disabled" type="button">当前第${pageBean.page}/${pageBean.pageCount}页</button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${pageBean.pageSize}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
                    <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                    <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                    <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary disabled" type="button">共${pageBean.rowCount}条记录</button>

            <c:if test="${pageBean.page==pageBean.pageCount }">
                <button class="btn btn-primary disabled" type="button">下一页</button>
            </c:if>
            <c:if test="${pageBean.page<pageBean.pageCount }">
                <button onclick="gotoPage(${pageBean.page+1},${pageBean.pageSize})"  class="btn btn-primary" type="button">下一页</button>
            </c:if>
            <button onclick="gotoPage(${pageBean.pageCount },${pageBean.pageSize})" class="btn btn-primary" type="button">尾页</button>
        </div>
    </div>
</div>


<div class="modal fade" id="editFlowModal" tabindex="-1" role="dialog"
     aria-labelledby="editFlowModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="editFlowModalLabel">编辑流程信息</h4>
            </div>
            <form action="approve/editFlow" method="post" class="form-horizontal" role="form"
                  id="editFlowForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="flowName" class="col-md-3 control-label">流程名称</label>
                            <div class="col-md-8">
                                <input type="hidden" name="oid" id="oid">
                                <input type="hidden" name="state" id="state">
                                <input type="text" id="flowName" name="flowName" class="form-control"
                                       placeholder="请输入流程名称">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="docType" class="col-md-3 control-label">单据类型</label>
                            <div class="col-md-8">
                                <select id="docType" name="docType" class="form-control">
                                    <option value="">--请选择--</option>

                                    <option value="BXD">--报销申请单--</option>

                                    <option value="GMD">--购买申请单--</option>

                                    <option value="YDD">--移动申请单--</option>

                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="info" class="col-md-3 control-label">流程描述</label>
                            <div class="col-md-8">
                                <input type="text" id="info" name="info" class="form-control">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="sub" class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<br>
<br>
<br>

<%@include file="../modal/confirm.jsp" %>
<script>
    $(document).ready(function () {
        $("#subconfirm").click(function () {
            deleteConfirm();
            $('#confirmModal').modal('hide');
        });
    });
</script>
<%@include file="../modal/alertmsg.jsp" %>
<script type="text/javascript">
    $(document).ajaxError(function (event, xhr) {
        if (xhr.status == "403") {//没有权限
            document.location.href = xhr.getResponseHeader("url");
        } else if (xhr.status != "200") {
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>


</body>
<script type="text/javascript">
    function gotoPage(page, pageSize) {
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#seachform").submit();
    }

    function searchBtn() {
        $("#page").val(1);
        $("#seachform").submit();
    }


    var deleteoid;

    function deleteFlow(oid) {
        deleteoid = oid;
    }

    function deleteConfirm() {
        $.get("approve/deleteFlow", {"oid": deleteoid}, function (s) {
            if (s == true) {
                document.location.href = "approve/selectApprove";
            } else {
                $("#alertmsg").text("删除失败!当前流程下有节点不能删除!");
                $('#alertMsgModal').modal('show');
            }
        });
    }

    function editFlow(oid,flowName,docType,info,state){

        if(oid==0){
            $("#oid").val("");
            $("#flowName").val("");
            $("#info").val("");
            $("#docType").val("");
            $("#info").val("");
            $("#state").val("N");
        }else{
            $("#oid").val(oid);
            $("#flowName").val(flowName);
            $("#info").val(info);
            $("#docType").val(docType);
            $("#state").val(state);

        }
        $('#editFlowModal').modal('show');
    }

    function editFlowState(o, oid) {
        var state = $(o).val();
        $.get("approve/editFlowState", {"oid": oid, "state": state}, function (s) {
            if (s == true) {
                if (state == "Y") {
                    $(o).text("禁用");
                    $(o).val("N");
                    $(o).removeClass("btn-success");
                    $(o).addClass("btn-warning");
                    $(o).parent().prev().text("启用");
                } else {
                    $(o).text("启用");
                    $(o).val("Y");
                    $(o).removeClass("btn-warning");
                    $(o).addClass("btn-success");
                    $(o).parent().prev().text("禁用");
                }
            } else {
                $("#alertmsg").text("当前流程没有节点,无法启用!");
                $('#alertMsgModal').modal('show');
            }
        });
    }

    $(document).ready(function () {

        $("#docType1 option[value='${docType1}']").attr("selected", 'selected');

        bindValidation();//绑定验证

        $('#editFlowModal').on('hidden.bs.modal', function () {//监听modal消失
            $("#editFlowForm").data('bootstrapValidator').destroy();
            $('#editFlowForm').data('bootstrapValidator', null);
            bindValidation();//要重新绑定验证
            $("#editFlowForm")[0].reset(); //将表单中的数据也清空

        })

    });

    function bindValidation() {
        $("#editFlowForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*input状态样式图片*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                flowName: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请输入流程名称'
                        },
                        callback: {
                            message: "流程名称已存在!",
                            callback: function (value, validator) {
                                var flag = false;
                                $.ajax({
                                    url: 'approve/checkFlowName', // 请求路径
                                    type: 'POST',
                                    async: false,	// 同步请求，必须是false
                                    data: {
                                        'flowName': $("#flowName").val(),
                                        'oid': $("#oid").val()
                                    },
                                    success: function (res) {
                                        flag = res.valid;
                                    }
                                });
                                return flag;
                            }
                        }


                    }
                },
                docType: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请选择单据类型'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                validator.defaultSubmit();
            }
        });
    }

</script>
</html>